<template>
  <div>
    <!-- 关联医院 -->
    <div v-if="this.tab == '4'">
      <!-- {{this.activeId}} -->
      <div class="listDiv">
        <el-table ref="tableData4" :data="tableData4" style="width: 100%">
          <el-table-column fixed type="index" label="序号" width="50" align="center" />
          <el-table-column label="医院名称" prop="name" align="center" />
          <el-table-column label="所属分公司" prop="offices.name" align="center" />
          <el-table-column label="所属城市" prop="" align="center">
            <template
              slot-scope="scope"
            >{{scope.row.provinces.name||null}}{{scope.row.citys.name||null}}{{scope.row.districts?scope.row.districts.name:null}}</template> 
          </el-table-column>
          <el-table-column label="创建时间" prop="created_at" align="center">
            <template slot-scope="scope">{{scope.row.created_at|dateFilter}}</template>
          </el-table-column> 
          <el-table-column label="备注" prop="remark" align="center" />
        </el-table>
      </div>
      <div class="allCenter">
        <el-button type="primary" @click="handleSubmit" :disabled="disabled">保存</el-button>
      </div>
    </div>
    <!-- 配置卡券 -->
    <div v-if="this.tab == '3'">
      <div class="mb_20" v-if="isDisable">
        <el-button type="primary" @click="handlePrize">添加券</el-button>
      </div>
      <div class="listDiv">
        <el-table ref="tableData3" :data="tableData3" style="width: 100%">
          <el-table-column fixed type="index" label="序号" width="50" align="center" />
          <el-table-column label="平台券名称" prop="name" align="center" />
          <el-table-column label="券描述" prop="tiket_count" align="center" />
          <el-table-column label="券类型" prop="ticket_type" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.ticket_type==1">抵扣券</span> 
              <span v-if="scope.row.ticket_type==2">体验券</span> 
            </template>
          </el-table-column>
          <el-table-column label="券场景" prop="ticket_scene" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.ticket_scene==1">项目券（体验券）</span> 
              <span v-if="scope.row.ticket_scene==2">服务商加盟券(抵扣券）</span> 
            </template>
          </el-table-column> 
          <el-table-column label="关联" prop="projects_name" align="center" />
          <el-table-column label="零售价" prop="sale_price" align="center" />
          <el-table-column label="创建时间" prop="created_at" align="center">
            <template slot-scope="scope">{{scope.row.created_at|dateFilter}}</template>
          </el-table-column> 
          <el-table-column label="关联医院" prop="hospitals_name" align="center" />
          <el-table-column label="操作" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="handleDelete(scope.$index)" v-if="isDisable">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="allCenter">
        <el-button type="primary" @click="NextSubmit" :disabled="disabled">下一步</el-button>
      </div>
      <el-dialog title="添加优惠券" :visible.sync="dialogFormVisible" width="60%"  center>
        <el-form ref="form" :model="form" :inline="true" label-width="150px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="券名称">
                <el-input v-model="form.ticket_name" clearable />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleSearch">查找</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="listDiv">
          <el-table
            ref="tableData1"
            :data="tableData1"
            style="width: 100%"
            :row-key="getRowKeys"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
            <el-table-column fixed type="index" label="序号" width="50" align="center" />
            <el-table-column prop="name" label="平台券名称" align="center" />
            <el-table-column label="券类型" prop="ticket_type" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.ticket_type==1">抵扣券</span> 
                <span v-if="scope.row.ticket_type==2">体验券</span> 
              </template>
            </el-table-column>
            <el-table-column label="券场景" prop="ticket_scene" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.ticket_scene==1">项目券（体验券）</span> 
                <span v-if="scope.row.ticket_scene==2">服务商加盟券(抵扣券）</span> 
              </template>
            </el-table-column> 
            <el-table-column prop="projects_name" label="关联" align="center" />
            <el-table-column prop="sale_price" label="零售价" align="center" />
            <el-table-column prop="created_at" label="创建时间" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.created_at|dateFilter}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="hospitals_name" label="关联医院" align="center" />
          </el-table>
          <div class="pagesCon">
            <div>
              <el-pagination
                :current-page="form.page"
                :page-sizes="page_sizes"
                :page-size="form.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page_totals"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
          <!-- 提交按钮 -->
          <div class="allCenter">
            <el-button type="primary" class="submitBtn" @click="submitFn()">保存</el-button>
            <!-- <el-button type="primary" class="submitBtn" @click="dialogFormVisible = false">取消</el-button> -->
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import filter from "@/assets/filter";
import {
  getHospital,
  bind_card_tickets,
  get_card_bind_ticket,
  tickets,
  isable_update
} from "@/api/cardMange";
export default {
  props: {
    tab: {
      type: Number,
      default: () => {
        return null;
      }
    },
    activeId: {
      type: Number,
      default: () => {
        return null;
      }
    }
  },
  filters:{
    // 时间戳转化
    dateFilter(e) {
      if (e != 0) {
        return new Date((e-0) * 1000).format('yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }
    },
  },
  data() {
    return {
      tableData3: [], //券列表
      tableData4: [],
      tableData1: [], //弹窗配置
      form: {
        id: "",
        ticket_name: "",
        page: 1,
        pagesize: 10
      }, //弹窗表单
      dialogFormVisible: false, //弹窗控制
      only: "", //页面提交成功返回唯一的字段
      disabled: false, //提交成功后再次查看当前页,提交按钮禁用
      // 分页
      page_sizes: [10, 30, 50, 100], // 每页显示个数
      page_totals: 0, // 总条目数,
      multipleSelection: [], //勾选优惠券数组
      isDisable:true
    };
  },
  mounted() {
    console.log("activeId", this.activeId);
    // this.bind_card_tickets()
    if(this.activeId-0){
    this.getHospitalList()
    this.get_card_bind()
    }
    // this.handleCoupons({
    //       id: this.activeId,
    //       page: this.form.page,
    //       pagesize: this.form.pagesize
    //     });
    if(this.$route.query.type=='edit'){
      this.isable(this.$route.query.userId-0)
    }
  },
  watch: {
    // activeId(val) {
    //   if (val) {
    //     this.getList();
    //   }
    // }
  },
  methods: {
    isable(id){
      isable_update({id:id})
      .then(res=>{
        console.log('关联',res)
        if(res.data.code==200){
          this.isDisable=res.data.data.is_update
        }
      })
    },
    // 获取关联医院表
    async getHospitalList(id) {
      //关联医院表
      // let data = { id };
      // console.log("data", data);
      // if (this.tab == 4) {
        let res = await getHospital({ id: this.activeId });
        console.log("tableData4", res.data.data);
        this.tableData4 = res.data.data?res.data.data:[];
      // }
    },
    // 弹窗列表-获取售卖券
    handleCoupons(data) {
      tickets(data)
        .then(res => {
          // console.log('res',res)
          if (res.data.code == 200) {
            this.tableData1 = res.data.data.data;
            this.page_totals = res.data.data.total;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err.msg);
        });
    },
    //绑定卡券
    async bindCardTickets(data) {
      let res = await bind_card_tickets(data);

      if (res.data.code == 200) {
        this.$message.success(res.data.msg);
        return res;
      }
    },
    // 关联卡券列表 get_card_bind_ticket
    async get_card_bind(id) {
      let res = await get_card_bind_ticket({ id: this.activeId });
      console.log("列表", res);

      if (res.data.code == 200) {
        this.tableData3 = res.data.data ? res.data.data : [];
      }
      console.log("this.tableData3", this.tableData3);
    },
    async NextSubmit() {
      // this.activeId = 3;
      let arr = [];
      this.tableData3.map(res => {
        arr.push(res.id);
      });
      let res = await this.bindCardTickets({
        id: this.activeId,
        ticket_ids: arr.join(",")
      });
      if(res.data.code==200){
      this.$emit("push", this.tab, res.data.data.id,res.data.code);
    // this.getHospitalList();
        
      }
    

    },
    handleSubmit() {
      this.$router.push("/platformCard");
    },
    // 配置弹窗
    handlePrize() {
      this.dialogFormVisible = true;
      if (this.activeId && this.tab == "3") {
        console.log('pagesize',this.form.pagesize)
        let datas = {
          id: this.activeId,
          page: this.form.page, pagesize: this.form.pagesize
        };
        console.log('配置弹窗',datas)
        this.handleCoupons(datas);
      }
    },
    // 弹窗确认
    submitFn() {
      // this.tableData3 = [...this.tableData3,...this.multipleSelection];
      // if (this.tab == "3") {
      this.dialogFormVisible = false;
      this.tableData3 = [...this.tableData3, ...this.multipleSelection];
      // } else if (this.tab == "4") {
      //   this.dialogFormVisible = false;
      //   this.tableData4 = this.multipleSelection;
      // }
    },
    // 勾选行的id
    getRowKeys(row) {
      if (this.tab == "3") {
        return row.id;
      } else if (this.tab == "4") {
        return row.id;
      }
    },
    // 勾选的数组
    handleSelectionChange(val) {
      let arr = [];
      this.multipleSelection = val;
      this.multipleSelection.forEach(item => {
        arr.push(item.id);
      });
    },
    // 删除
    handleDelete(index) {
      let arr = [];
      this.tableData3.splice(index, 1);
      this.tableData3.forEach(item => {
        arr.push(item.id);
      });
    },
    // 弹窗优惠券名称查询
    handleSearch() {
      if (this.tab == "3") {
        console.log('名称查询',this.form)
        // this.form.page=1,
        // this.form.pagesize=10
        this.handleCoupons(this.form);
      }
    },
    // 优惠券弹窗关闭清空勾选
    close() {
      this.dialogFormVisible = false;
      this.form = {
        ticket_name: ""
      };
    },

    // 改变页面条数-弹窗
    handleSizeChange(val) {
      if (this.tab == "3") {
        this.form.pagesize = val;
        console.log('条数',this.form)
        this.handleCoupons(this.form);
      } 
      // else if (this.tab == "4") {
      //   this.form.pagesize = val;
      //   this.handleCoupons(this.form);
      // }
    },
    // 选择页数-弹窗
    handleCurrentChange(val) {
      if (this.tab == "3") {
        this.form.page = val;
        // this.form.pagesize=10
        console.log('页数',this.form.pagesize)
        this.handleCoupons(this.form);
      } 
      // else if (this.tab == "4") {
      //   this.form.page = val;
      //   this.handleCoupons(this.form);
      // }
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      });
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    }
  }
};
</script>
<style  scoped>
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
.pagesCon {
  text-align: right;
  margin-top: 20px;
}
.mb_20 {
  margin-bottom: 20px;
}
.mt_20 {
  margin-top: 20px;
}
.allCenter {
  text-align: center;
  margin: 20px;
}
</style>